<template>
  <h2>计算与侦查</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">computed</div>
    <div  class="zhtt-demo-card-body">
      publishedBooksMessage：{{publishedBooksMessage}}<br/>
      publishedBooksMessage2：{{publishedBooksMessage2}}<br/>
      publishedBooksLength：{{publishedBooksLength}}<br/>
      author：{{author}}<br/>
      <button class="zhtt-btn" @click="addBook()">追加book</button>
    </div>
    <div class="zhtt-demo-card-footer">
      computed: { // 这个有缓存，如果不想缓存可用：method
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">watch</div>
    <div  class="zhtt-demo-card-body">
      <p>{{watchResult}}</p>
      <button class="zhtt-btn" @click="updateName()">updateName</button>
      <button class="zhtt-btn" @click="updateUser()">updateUser</button>
      <button class="zhtt-btn" @click="updateUserAge()">updateUserAge</button>
      <button class="zhtt-btn" @click="updateUser2Age()">updateUser2Age</button>
    </div>
    <div class="zhtt-demo-card-footer">
      watch
    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {
      watchResult:null,
      name:'张三',
      user:{age:3},
      user2:{age:3},
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      },
      publishedBooksMessage:this.author,
      publishedBooksMessage2:this.author
    }
  },
  methods:{
    addBook(){
      this.author.books.push('books '+ this.author.books.length);
    },
    updateName(){
      this.name = Math.random();
    },
    updateUser(){
      this.user = {age:Math.random()};
    },
    updateUserAge(){
      this.user.age = Math.random();
    },
    updateUser2Age(){
      this.user2.age = Math.random();
    }
  },
  watch:{
    author(newValue, oldValue){
      console.log('new：', newValue);
      console.log('old：', oldValue);
      this.watchResult = `newValue：${JSON.stringify(newValue)}==oldValue：${JSON.stringify(oldValue)}`;
    },
    name(newValue, oldValue){
      console.log('');
      console.log('new：', newValue);
      console.log('old：', oldValue);
      this.watchResult = `newValue：${JSON.stringify(newValue)}==oldValue：${JSON.stringify(oldValue)}`;
    },
    user(newValue, oldValue){
      console.log('');
      console.log('new：', newValue);
      console.log('old：', oldValue);
      this.watchResult = `newValue：${JSON.stringify(newValue)}==oldValue：${JSON.stringify(oldValue)}`;
    },
    user2:{
      handler(newValue, oldValue) {
        console.log('监听user2整个对象的变化');
        this.watchResult = `newValue：${JSON.stringify(newValue)}==oldValue：${JSON.stringify(oldValue)}`;
      },
      deep: true
    }
  },
  computed: { // 这个有缓存，如果不想缓存可用：method
    // 计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向 vm 实例
      return this.author.books.length > 0 ? 'Yes' : 'No';
    },
    publishedBooksLength() {
      // `this` 指向 vm 实例
      return this.author.books.length ;
    }
  }
}
</script>